<template>
    <div class="page">
        <div class="page-header flex-row">
<!--            <el-input class="filter-item" size="small" v-model="filterData.modelName" clearable placeholder="模板名称"></el-input>-->
<!--            <el-input class="filter-item" size="small" v-model="filterData.taskName" clearable placeholder="任务名称"></el-input>-->
            <el-select class="filter-item" v-model="filterData.risk" size="small"  clearable placeholder="风险等级">
                <el-option label="暂无风险" value="暂无风险"></el-option>
                <el-option label="低风险" value="低风险"></el-option>
                <el-option label="中风险" value="中风险"></el-option>
                <el-option label="高风险" value="高风险"></el-option>
            </el-select>
            <div class="flex1"></div>
            <el-button v-if="$auth['operation_task_reportBatchDelete']" size="small" @click="deleteBatch" :disabled="!ids.length">批量删除</el-button>
            <el-popover
                    placement="top-start"
                    v-if="$auth['operation_task_repotExport']"
                    title="选择导出列"
                    width="400"
                    v-model="visible"
                    trigger="click"
                    style="margin: 0 15px">
                <div>
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox v-for="item in tableColumn" :key="item.alias" :label="item.name">{{item.alias}}</el-checkbox>
                    </el-checkbox-group>
                    <div class="flex-row">
                        <div class="flex1"></div>
                        <el-button size="small" type="text" @click="exportFile">确定</el-button>
                    </div>
                </div>
                <el-button slot="reference" size="small">导出</el-button>
            </el-popover>
        </div>
        <tz-table
                ref="reportTable"
                highlight-current-row
                @selection-change="selectChange"
                size="mini"
                :data="loadData">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="modelName"
                    show-overflow-tooltip
                    label="模板名称">
                <template slot-scope="scope">
                    <high-light :value="scope.row.modelName" :keyword="filterData.modelName"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="taskName"
                    show-overflow-tooltip
                    label="任务名称">
                <template slot-scope="scope">
                    <high-light :value="scope.row.taskName" :keyword="filterData.taskName"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="risk"
                    show-overflow-tooltip
                    label="风险等级">
                <template slot-scope="scope">
                    <el-tag size="small" v-if="scope.row.risk" :type="scope.row.risk.includes('低风险') ? 'success' : 'error'">{{scope.row.risk}}</el-tag>
                    <p v-else> - </p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="evaluateTotal"
                    show-overflow-tooltip
                    label="评估得分">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    show-overflow-tooltip
                    label="评估时间"
                    :formatter="(row) => {
                       return moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
                     }">
            </el-table-column>
            <el-table-column
                    prop="tag"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="toDetail(scope)" size="small" type="text">查看</el-button>
                    <el-button v-if="$auth['operation_task_repotDelete']" @click="deleteResult([scope.row.id])" size="small" type="text">删除</el-button>
                </template>
            </el-table-column>
        </tz-table>
    </div>
</template>

<script>
import tzTable from '@/components/tz-table'
import moment from 'moment'
export default {
  name: 'result',
  components: {
    tzTable
  },
  props: {
    taskId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      filterData: {
        // modelName: '',
        // taskName: '',
        risk: ''
      },
      checkList: [],
      network: 'JZW',
      tableColumn: [{
        alias: '模板名称',
        name: 'modelName'
      }, {
        alias: '任务名称',
        name: 'taskName'
      }, {
        alias: '风险等级',
        name: 'risk'
      }, {
        alias: '评估时间',
        name: 'createTime'
      }, {
        alias: '评估得分',
        name: 'evaluateTotal'
      }],
      moment,
      ids: []
    }
  },
  computed: {
    exportDtoList() {
      return this.tableColumn.filter(item => {
        return this.checkList.includes(item.name)
      })
    }
  },
  watch: {
    filterData: {
      handler() {
        this.refresh()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    deleteBatch() {
      this.deleteResult(this.ids)
    },
    selectChange(rows) {
      this.ids = rows.map(item => item.id)
    },
    exportFile() {
      this.visible = false
      this.$http.post('/evaluate/exportTaskByTaskId', {
        network: this.network,
        taskId: this.taskId,
        exportDtoList: this.exportDtoList
      }, {
        responseType: 'blob',
        headers: {
          'isFileExport': true
        }
      }).then(res => {
        const fileName = `报告列表-${moment().format('YYYY-MM-DD')}.xls`
        let content = res.data; // 文件流
        let blob = new Blob([content]);
        let link = document.createElement('a');
        link.download = fileName;
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href); // 释放URL 对象
        document.body.removeChild(link);
      }).catch(err => {
        console.log(err)
      })
    },
    refresh() {
      this.$refs.reportTable?.refresh(true)
    },
    toDetail({row}) {
      this.$router.push({
        path: '/operation/result-info',
        query: {
          id: row.id,
          taskName: row.taskName,
          createTime: row.createTime ? moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'
        }
      })
    },
    deleteResult(ids) {
      this.$confirm('是否删除当前任务').then(res => {
        this.$http.post('/evaluate/deleteResult', {
          ids
        }).then(() => {
          this.$TZmessage.success('删除成功')
          this.refresh()
        }).catch(err => {
          this.$TZmessage.error(err.msg || '删除失败')
        })
      }).catch(err => {
        console.log('取消执行')
      })
    },
    loadData(params) {
      return this.$http.get('/evaluate/getResultList', {
        params: {
          taskId: this.taskId,
          ...params,
          ...this.filterData
        }
      }).then(res => {
        return {
          data: res.records || [],
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.message || '获取列表失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .page {
        .page-header {
            width: 100%;
            padding-bottom: 20px;
            .filter-item {
                width: 200px;
                margin-right: 15px;
            }
        }
    }
</style>